<template>
  <div class="loginphone-page">
    <div class="headerBox">
      <van-nav-bar
        title="修改登录密码"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div class="input_box">
      <div class="samll_box">
        <span class="info">{{userInfo.username?'当前账号：'+ userInfo.username: ''}}</span>
        <!-- <input
          type="text"
          v-model="username"
          placeholder="请输入用户名"
          placeholder-style="color:#D6D5D5"
        /> -->
      </div>
      <div class="samll_box">
        <input
          type="text"
          v-model="iphone"
          placeholder="请输入手机号"
          placeholder-style="color:#D6D5D5"
        />
      </div>
      <div class="samll_box">
        <input
          type="text"
          v-model="code"
          placeholder="请输入验证码"
          placeholder-style="color:#D6D5D5"
        />
        <span class="hy_code" v-if="timer == 0" @click="codeFunc"
          >发送验证码</span
        >
        <span class="hy_code" v-else>{{ timer + "s" }}</span>
      </div>
    </div>
    <div class="footer" v-show="isOriginHei">
      <span v-if="!type">下一步</span>
      <span v-else class="sub" @click="yCode">下一步</span>
    </div>
  </div>
</template>

<script>
import positionBtn from "../positionBtn.js";
export default {
  mixins: [positionBtn],
  data() {
    return {
      type: false,
      username: "",
      iphone: "",
      code: "",
      timer: 0,
      timerInter: null,
      userInfo: {},
    };
  },
  watch: {
    code(val) {
      if (val.length >= 4) {
        this.type = true;
      } else {
        this.type = false;
      }
    },
  },
  created() {
    this.setUserInfo();
  },
  methods: {
    async setUserInfo() {
      let self = this;
      let res = await this.$http.getUserInfo();
      if (res) {
        console.log(res);
        this.userInfo = res.data;
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    userNameTest() {
      if (!this.iphone) {
        this.$toast("请输入手机号");
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.iphone)) {
        this.$toast("请输入正确手机号");
        return false;
      } else {
        return true;
      }
    },
    userName() {
      if (!this.username) {
        this.$toast("请输入用户名");
        return false;
      } else {
        return true;
      }
    },
    //  获取验证码
    async codeFunc() {
      if (!this.userNameTest()) {
        return false;
      }
      let self = this;
      let resuser = await this.$http.checkUsername({
        username: self.userInfo.username,
        tel: self.iphone,
      });
      if (resuser) {
        let res = await this.$http.sendMaseeage({
          tel: self.iphone,
        });
        if (res) {
          this.$toast("验证码已发送");
          self.timer = 60;
          self.timerInter = setInterval(() => {
            self.timer--;
            if (self.timer === 0) {
              clearInterval(self.timerInter);
            }
          }, 1000);
        } else {
          self.timer = 0;
        }
      }
    },
    async yCode() {
      let self = this;
      let res = await this.$http.yCode({
        tel: self.iphone,
        code: self.code,
      });
      if (res) {
        console.log(res);
        this.$router.push({
          name: "setamendPass",
          query: { tel: self.iphone, username: self.userInfo.username, code: self.code },
        });
      }
    },
  },
};
</script>

<style scoped>
.loginphone-page {
  background: #fff;
  height: 100vh;
}
.input_box {
  padding: 0 0.4rem;
}
.samll_box {
  height: 1rem;
  line-height: 1rem;
  border-bottom: 0.02rem solid #d6d5d5;
  margin-bottom: 0.4rem;
  position: relative;
}
.samll_box > input {
  height: 100%;
  width: 5rem;
  border: none;
  font-size: 0.35rem;
}
.icon,
.clear {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  position: relative;
  top: 0.1rem;
  margin-right: 0.2rem;
}
.info{
  line-height: .5rem;
  height: 0.5rem;
  width: 5rem;
  border: none;
  font-size: .29rem;
  color: #333333;
  font-weight: bold;
}
.user {
  background: url("../../assets/img/login/icon_geren.png") no-repeat;
  background-size: 100% 100%;
}
.pass {
  background: url("../../assets/img/login/icon_mima.png") no-repeat;
  background-size: 100% 100%;
}
.clear {
  background: url("../../assets/img/login/icon_shanch.png") no-repeat;
  background-size: 100% 100%;
}
.iphone {
  background: url("../../assets/img/login/icon_dianhua.png") no-repeat;
  background-size: 100% 100%;
}
.yan {
  background: url("../../assets/img/login/icon_yanzheng.png") no-repeat;
  background-size: 100% 100%;
}
.hy_code {
  display: inline-block;
  position: absolute;
  width: 1.88rem;
  height: 0.61rem;
  text-align: center;
  line-height: 0.61rem;
  color: #00c8e7;
  border-radius: 0.3rem;
  border: 0.02rem solid #00c8e7;
  top: 0.1rem;
  right: 0;
}
.forget {
  float: right;
  font-size: 0.29rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
.footer {
  width: 100%;
  position: fixed;
  padding: 0 0.5rem;
  bottom: 2.2rem;
}
.footer > span {
  width: 100%;
  display: inline-block;
  height: 0.94rem;
  background: #00c8e7;
  line-height: 0.94rem;
  text-align: center;
  color: #fff;
  border-radius: 0.47rem;
  font-size: 0.34rem;
  opacity: 0.4;
}
.footer span.sub {
  opacity: 1;
}
</style>
